<template>
    <div>
        <!--table-->
        <el-table
                :data="employeeAndSalaryList"
                border
                size="small"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    align="center"
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="workId"
                    label="工号"
                    width="180">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="email"
                    label="电子邮件"
                    width="180">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="phone"
                    label="电话号码">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="department.name"
                    label="所属部门">
            </el-table-column>
            <el-table-column label="工资账套" align="center">
                <template slot-scope="scope">
                    <!--使用v-if 页面直接不渲染-->
                    <!--担使用v-show 页面直接渲染,只是不显示-->
                    <el-tag v-if="scope.row.salary==null" size="small">暂未设置</el-tag>

                    <el-tooltip placement="left" v-if="scope.row.salary!=null">
                        <div slot="content">
                            <!--展示的信息-->
                            <table>
                                <tr>
                                    <td>基本工资</td>
                                    <td>{{scope.row.salary.basicSalary}}元</td>
                                </tr>
                                <tr>
                                    <td>交通补助</td>
                                    <td>{{scope.row.salary.trafficSalary}}元</td>
                                </tr>
                                <tr>
                                    <td>午餐补助</td>
                                    <td>{{scope.row.salary.lunchSalary}}元</td>
                                </tr>
                                <tr>
                                    <td>奖金</td>
                                    <td>{{scope.row.salary.bonus}}元</td>
                                </tr>
                                <tr>
                                    <td>养老金比率</td>
                                    <td>{{scope.row.salary.pensionPer}}</td>
                                </tr>
                                <tr>
                                    <td>养老金基数</td>
                                    <td>{{scope.row.salary.pensionBase}}元</td>
                                </tr>
                                <tr>
                                    <td>医疗保险比率</td>
                                    <td>{{scope.row.salary.medicalPer}}</td>
                                </tr>
                                <tr>
                                    <td>医疗保险基数</td>
                                    <td>{{scope.row.salary.medicalBase}}元</td>
                                </tr>
                                <tr>
                                    <td>公积金比率</td>
                                    <td>{{scope.row.salary.accumulationFundPer}}</td>
                                </tr>
                                <tr>
                                    <td>公积金基数</td>
                                    <td>{{scope.row.salary.accumulationFundBase}}元</td>
                                </tr>
                            </table>
                        </div>
                        <el-tag size="small" class="tagSty">
                            {{scope.row.salary.name}}
                        </el-tag>
                    </el-tooltip>

                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-popover
                            placement="left"
                            title="标题"
                            width="200"
                            @show="showPop(scope.row)"
                            @hide="hidePop(scope.row)"
                            trigger="click">
                        <div>
                            <el-select v-model="currentSalaryId" @change="changeCurrentSalaryId" placeholder="请选择" size="small">
                                <el-option
                                        v-for="item in salaryAllList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <el-button slot="reference" size="small" type="danger">修改账套</el-button>
                    </el-popover>

                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="pagination-div">
            <el-pagination
                    background
                    layout="sizes, prev, pager, next, jumper, ->, total, slot"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    :current-page="currPage"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "SalSobCfg",
        data(){
            return{
                employeeAndSalaryList:[],
                salaryAllList:[],
                currentSalaryId:null,
                total:0,
                currPage:1,
                page:1,
                size:10,
            }
        },
        mounted() {
            this.initEmployeeAndSalaryList();
            this.initSalaryAllList();
        },
        methods:{
            initSalaryAllList(){
                this.getRequest("/salary/sob/").then(resp=>{
                    if(resp){
                        this.salaryAllList=resp.data;
                    }
                });
            },
            initEmployeeAndSalaryList(){
                this.getRequest("/salary/sobcfg/?page="+this.page+"&size="+this.size).then(resp=>{
                    if(resp){
                        this.employeeAndSalaryList=resp.data.list;
                        this.total=resp.data.total;
                        this.currPage=resp.data.page;
                    }
                })
            },
            // 页码变更
            currentChange(currentPage){
                this.page=currentPage;
                this.initEmployeeAndSalaryList();
            },
            // 每页条数改变触发
            sizeChange(currentSize){
                this.size=currentSize;
                this.initEmployeeAndSalaryList();
            },
            // 行前边的框勾选
            handleSelectionChange(val) {
                console.log(val)
            },
            // pop框显示时触发;data表示的是点击的那一行的对象值
            showPop(data){

                if(data.salary!=null){
                    // 当选择的员工有工资账套
                    // 把currentSalaryId值变为此员工所拥有的账套id,这样select框显示账套名称
                    this.currentSalaryId=data.salary.id
                }else{
                    // 当选择的员工没有工资账套
                    // 把currentSalaryId值变为null,这样select框还是请选择提示
                    this.currentSalaryId=null;
                }

            },
            //隐藏时触发;data表示的是点击的那一行的对象值
            hidePop(data){
                // 如果 currentSalaryId 为空,也就是没有选择账套,不发送修改请求
                if(this.currentSalaryId==null){
                    return;
                }

                // 修改这个员工的账套信息
                // 需要员工id
                let empId = data.id;
                // 选中的账套信息
                let salaryId = this.currentSalaryId;
                this.putRequest("/salary/sobcfg/?empId="+empId+"&salaryId="+salaryId).then(resp=>{
                    if(resp){
                        this.initEmployeeAndSalaryList();
                    }
                })
            },
            //
            changeCurrentSalaryId(id){
                this.currentSalaryId=id
            }

        }
    }
</script>

<style>
    .pagination-div{
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
    }
    .tagSty{
        cursor: pointer;
    }
</style>